import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Xwimg from '../img/diy/xiangwei.png'
import Xwmclose from '../img/material/button.png'
class Facialmaskpage3 extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
            title:"香味",
            essence:{
                dname:"",
                name:""
            },
            essentialoilsa:{
                dname:"",
                name:""
            },
            essentialoilsb:{
                dname:"",
                name:""
            },
            words: [
                {
                    "title": "玫瑰精油",
                    "description": "玫瑰精油是世界上最昂贵的精油，被称为 “精油之后”。能调整女性内分泌，滋养子宫，缓解痛经，改善性冷感和更年期不适。尤其是具有很好的美容护肤作用，能以内养外淡化斑点，促进黑色素分解，改善皮肤干燥，恢复皮肤弹性，让女性拥有白皙、充满弹性的健康肌肤，是最适宜女性保健的芳香精油。"
                },
                {
                    "title": "薰衣草精油",
                    "description": "薰衣草精油是由薰衣草提炼而成，有止痛、抗忧郁、消毒、杀菌和解除充血与肿胀的功用，还有降血压、驱虫、镇定和回复健康的效果。综合来说，它的功效可以分成镇定、抚慰和最重要的平衡，所以大家也称它为“平衡油”。薰衣草精油是精油中的百搭精油，其性质温和的特性使其适合任何肤质的皮肤，能够与各种精油配合，是西方家庭最常用的必备精油，同时也是芳香疗法中最古老、用途最广泛的精油，因此薰衣草精油也被称为“精油之后”。"
                },
                {
                    "title": "香精",
                    "description": "香精是由人工合成的模仿水果和天然香料气味的浓缩芳香油。它是一种人造香料。多用于制造食品，化妆品和卷烟等。"
                }
            ]

	    }
	}
	componentWillMount(){

	}
    componentDidMount(){
        
        this.selectCondition();
    }
    selectCondition(){
        var _this=this
        var clickEvt=function(ele){
            var essentialoilsa=_this.state.essentialoilsa,
                essentialoilsb=_this.state.essentialoilsb
            if(ele.flag){ 
                
                if(ele.index==0){
                    essentialoilsa={
                        dname:"玫瑰精油(润肤)",
                        name:"meiguijingyou-a"
                    }
                    essentialoilsb={
                        dname:"",
                        name:""
                    }
                }else{
                    essentialoilsa={
                        dname:"",
                        name:""
                    }
                    essentialoilsb={
                        dname:"薰衣草精油(舒缓、宁神)",
                        name:"xunyicaojingyou-a"
                    }
                }
                _this.setState({
                    essentialoilsa:essentialoilsa,
                    essentialoilsb:essentialoilsb
                })
            }else{
                if(ele.index==0){
                    essentialoilsa={
                        dname:"",
                        name:""
                    }
                    essentialoilsb={
                        dname:"",
                        name:""
                    }
                }else{
                    essentialoilsa={
                        dname:"",
                        name:""
                    }
                    essentialoilsb={
                        dname:"",
                        name:""
                    }
                }
                _this.setState({
                    essentialoilsa:essentialoilsa,
                    essentialoilsb:essentialoilsb
                })
            }
            _this.props.callback(_this.state.essentialoilsa,_this.state.essentialoilsb)

            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length-1;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-act")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-act")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var items=document.querySelectorAll(".fmp3-select-content")
        for(let i=0;i<items.length-1;i++){
            items[i].flag=false;
            items[i].index=i
            items[i].addEventListener("click",function(e){ 
                this.flag=(this.flag==true)?false:true;
                clickEvt(e.currentTarget);  
            });
        }
        items[2].addEventListener("click",function(e){  
            document.getElementById("fmp3-model").style.display="block"         
        });


        var mclickEvt=function(ele){
            if(ele.flag){
                let essence
                if(ele.index==0){
                    essence={
                        dname:"花香(复合型香味)",
                        name:"xiangjing-a"
                    }
                }else{
                    if(ele.index==1){
                        essence={
                            dname:"果香(复合型香味)",
                            name:"xiangjing-b"
                        }
                    }else{
                        essence={
                            dname:"木香(复合型香味)",
                            name:"xiangjing-c"
                        }
                    }
                }
                _this.setState({
                    essence:essence
                })
            }else{
                _this.setState({
                    essence:{
                        name:"",
                        dname:""
                    }
                })
            }
            _this.props.callback2(_this.state.essence)
            let a = [];
            let p = ele.parentNode.children;
            for(let i =0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-act")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-act")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
            
        }

        var mitems=document.querySelectorAll(".fmp3-mselect-content");
        for(let i=0;i<mitems.length;i++){
            mitems[i].flag=false;
            mitems[i].index=i
            mitems[i].addEventListener("click",function(e){ 
                this.flag=(this.flag==true)?false:true; 
                mclickEvt(e.currentTarget);
            });
        }
    }
    clickScroll(){
        this.props.clickBack(3)
    }
    closeModel(){
        document.getElementById("fmp3-model").style.display="none"
    }
    confirm(){
        var items=document.querySelectorAll(".fmp3-select-content")
        if(this.state.essence.dname!=""){
            items[2].classList.add("fmp-select-content-act")
            items[2].querySelector(".fmp-sc-icon").classList.add("fmp-sc-icon-active")
        }else{
            items[2].classList.remove("fmp-select-content-act")
            items[2].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
        }
        document.getElementById("fmp3-model").style.display="none"

    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
            <div className="fmp-container" style={{top: "200%"}} id="fmpage3">
            	<div className="fmt-container boxshaw">
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span>{this.state.title}</span>
                </div>
            	<Facialmaskylcs words={this.state.words}/>
            	<div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Xwimg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                     {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
               <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                         <p>点击下面挑挑喜欢的<span className="fmp-select-title-span">香味</span>吧<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp3-select-content">  
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>               
                            <div className="fmp-sc-detail">
                                <p>玫瑰精油<br/>(润肤)</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp3-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <p>薰衣草精油<br/>(舒缓、宁神)</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp3-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                {this.state.essence.dname==""?<p>香精<br/>...</p>:<p>{this.state.essence.dname.substring(0,2)}<br/>{this.state.essence.dname.substring(2)}</p>}
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp3-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">温馨提示</span><p className="fmp-select-tip-wz">如果选择了精油，建议不用添加香精，保留精油原味</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>
                </div>
                <div className="fmp-model" id="fmp3-model">
                    <div className="fmp-model-cover"></div>
                    <div className="fmp-select fmp-model-select" style={{marginTop:"1.5rem"}}>
                        <div className="fmp-select-cricle">
                            <div className="fmp-select-cricle-circleLeft">
                                <div className="fmp-select-cricle-lineLeft"></div>  
                            </div>
                            <div className="fmp-select-cricle-circleRight">
                                <div className="fmp-select-cricle-lineRight"></div>
                            </div>
                        </div>  
                        <div className="fmp-select-title">
                            <p>点击下面挑挑<span className="fmp-select-title-span">香精味道</span>吧<i className="iconfont">&#xe616;</i></p>
                        </div>
                        <div className="fmp-select-explain">
                            <p>价格都一样的哦，请尽情选择自己喜欢的味道！</p>
                        </div>
                        <ul className="fmp-select-row"> 
                            <li className="fmp-select-content fmp3-mselect-content">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                                <div className="fmp-sc-detail">
                                    <p>花香<br/>(复合型香味)</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp3-mselect-content">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>果香<br/>(复合型香味)</p>
                                </div>
                            </li>
                            <li className="fmp-select-content fmp3-mselect-content">
                                <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                                <div className="fmp-sc-detail">
                                    <p>木香<br/>(复合型香味)</p>
                                </div>
                            </li>
                        </ul>
                        <div className="fmp-select-tip" style={{marginBottom:"1rem"}}>
                            <div className="fmp3-mst-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">香精成本比添加植物提取的精油便宜，当含微量的容积，可能会有极少数人因此过敏。</p></div>
                        </div>
                        <div className="fmp-select-bottom">
                            <span onClick={this.confirm.bind(this)}>确定</span>
                        </div>   
                    </div>
                </div>              
            </div>
        )
    }
}


export default Facialmaskpage3;